<template>
  <div>
    <div class="app-container">
      <el-form :inline="true" :model="searchForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="套账编码:">
          <el-input v-model="searchForm.financialCode" size="small" placeholder="请输入套账编码" />
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input v-model="searchForm.companyName" size="small" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="门店名称:">
          <el-input v-model="searchForm.storeName" size="small" placeholder="请输入门店名称" />
        </el-form-item>
        <el-form-item label="合同编号:">
          <el-input v-model="searchForm.contractId" size="small" placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="收款状态:">
          <el-select v-model="searchForm.rentType" size="small" placeholder="请选择收款状态">
            <el-option
              v-for="item in rentCharge"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 按钮组 -->
      <el-row>
        <el-button type="primary" size="small" @click="isPaymentPopUp">收款</el-button>
        <el-button type="primary" size="small" :disabled="isDisabled" @click="ischeck">查看凭证</el-button>
        <el-button type="primary" size="small" @click="isDetailsBtn">导出租金收取数据</el-button>
        <el-button type="primary" size="small" :disabled="isDisabled">撤销收款</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="formData" @selection-change="selectId">
        <el-table-column type="selection" width="55" align="center" @selection-change="selectId"/>
        <el-table-column label="合同编号" prop="contractId" />
        <el-table-column label="支付状态" prop="voucherSerialNumber" :show-overflow-tooltip="true" />
        <el-table-column label="公司名称" prop="bookingTime" :show-overflow-tooltip="true" />
        <el-table-column label="账套编码" prop="companyName" :show-overflow-tooltip="true" />
        <el-table-column label="门店编码" prop="financialCode" :show-overflow-tooltip="true" />
        <el-table-column label="门店名称" prop="storeId" :show-overflow-tooltip="true" />
        <el-table-column label="本期开始日期" prop="currentStartTime" :show-overflow-tooltip="true" />
        <el-table-column label="本期结束日期" prop="currentEndTime" :show-overflow-tooltip="true" />
        <el-table-column label="计划付款日期" prop="planPaymentTime" :show-overflow-tooltip="true" />
        <el-table-column label="本期计划付款金额" prop="planPaymentMoney" :show-overflow-tooltip="true" />
        <el-table-column label="本期剩余待支付金额" prop="planPaymentMoney" :show-overflow-tooltip="true" />
        <el-table-column label="本期实际付款金额" prop="actualPaymentMoney" :show-overflow-tooltip="true" />
        <el-table-column label="付款详情" :show-overflow-tooltip="true" >
          查看
        </el-table-column>
      </el-table>
      <!--租金支取预览-->
      <el-dialog title="预览凭证" :visible.sync="ispreview" :before-close="closePopUp">
        <el-table
          :data="previewDocuments"
          border
          style="width: 100%">
          <el-table-column
            prop="toLoanSign"
            label="借贷标志"
            width="180">
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="分录名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额(元)">
          </el-table-column>
          <el-table-column
            prop="bookingTime"
            label="记账日期">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="摘要">
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>

      <!--批量收款-->
      <el-dialog title="批量付款" width="80%" :visible.sync="isPayment" :before-close="closePopUp">
<!--收款-->
        <div class="batchPayment">
          <h2 class="title">收款</h2>
          <el-table
            :data="payment"
            border
            style="width: 100%">
            <el-table-column
              prop="pId"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="companyName"
              label="公司名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="storeId"
              label="门店编码"
              width="180">
            </el-table-column>
            <el-table-column
              prop="storeName"
              label="门店名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="actualPaymentTime"
              label="实际付款日期"
              width="230">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.actualPaymentTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              prop="actualPaymentMoney"
              label="实际付款金额"
              width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.actualPaymentMoney" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="currentStartTime"
              label="本期开始日期"
              width="230">
            </el-table-column>
            <el-table-column
              prop="currentEndTime"
              label="本期结束日期"
              width="230">
            </el-table-column>
            <el-table-column
              prop="planPaymentTime"
              label="本期计划付款日期"
              width="230">
            </el-table-column>
            <el-table-column
              prop="planPaymentMoney"
              label="本期计划付款金额">
            </el-table-column>
            <el-table-column
              prop="contractId"
              label="合同编号"
              width="230">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope)"
                type="text"
                size="small">
                移除
              </el-button>
            </template>
            </el-table-column>
          </el-table>
        </div>
<!--收款流水-->
        <div class="paymentWater">
          <h2 class="title">我司收款流水</h2>
          <el-button type="primary" @click="runWater">新增</el-button>
          <div class="sameAccount">
            <el-checkbox v-model="checked" @change="isChecked">使用同一付款银行账号（我司）</el-checkbox>
            <span class="accountWater">
              付款银行账号:<el-input placeholder="请输入内容" v-model="iSbackAccount"></el-input>
            </span>
          </div>
          <el-table
            border
            style="width: 100%"
            :data="collectionInfoForm"
            class="insetRow">
            <el-table-column
              prop="companyBankAccount"
              label="付款银行账号（我司）"
              width="230">
              <template slot-scope="scope">
                <el-input v-model="scope.row.companyBankAccount" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="companyBankName"
              label="付款银行名称"
              width="180" >
            </el-table-column>
            <el-table-column
              prop="paymentName"
              label="收款人"
              width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paymentName" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="landadyBankAccout"
              label="收款银行账号（房东）"
              width="230">
              <template slot-scope="scope">
                <el-input v-model="scope.row.landadyBankAccout" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="landadyBankDeposit"
              label="收款开户行"
              width="230">
              <template slot-scope="scope">
                <el-input v-model="scope.row.landadyBankDeposit" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="payTel"
              label="联系电话"
              width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.payTel" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="payMoney"
              label="收款金额"
              width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.payMoney" ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <el-button type="primary">删除</el-button>
            </el-table-column>
          </el-table>
          <span class="totalPrice">收款总计:{{totalPriceNum}}</span>
        </div>
<!--按钮组-->
        <div class="paymentBtn">
          <el-button type="primary" @click="subpayee">提交</el-button>
          <el-button type="primary" @click="closePopUp">取消</el-button>
        </div>
      </el-dialog>

      <!--查看凭证-->
      <check :isCheck="isCheck" :checkForm="checkForm" @closePopUp="closePopUp"></check>
      <!--导出租金收取数据-->
      <paymentDetails :isDetails="isDetails" @close="closePopUp"></paymentDetails>
    </div>
  </div>
</template>

<script>
import { queryContractList, queryRentColletion, paymentMoney, paymentPlanDelete, addPaymentPlan } from '@/api/rent'
import check from './components/check'
import paymentDetails from '@/views/rent/components/paymentDetails'
export default {
  name: 'VueAdminTemplateCollection',
  components: {
    check,
    paymentDetails
  },
  data() {
    return {
      searchForm: {
        financialCode: '',
        companyName: '',
        storeName: '',
        contractId: '',
        rentType: 2
      },
      // 表格加载
      loading: true,
      formData: [],
      // 收款状态
      rentCharge: [{
        id: 1,
        value: '已支付'
      }, {
        id: 2,
        value: '未支付'
      }],
      // 预览凭证
      previewDocuments: [],
      // 显示dialog
      ispreview: false,
      // 合同编号
      contractId: '',
      // 是否禁用按钮
      isDisabled: false,
      // 批量收款数据
      payment: [],
      // 显示批量付款
      isPayment: false,
      // 同一收款账号
      iSbackAccount: '',
      // 是否使用同一账号收款
      checked: false,
      // 总条数
      total: 0,
      // 每页显示
      limit: 5,
      // 当前页数
      page: 1,
      // 流水数据
      collectionInfoForm: [],
      // 总计金额
      totalPriceNum: 0,
      // 查看凭证弹窗
      isCheck: false,
      // 凭证数据
      checkForm: [],
      // 导出组件收款数据弹窗
      isDetails: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 一对多数据遍历解构删除
    dataDes(data) {
      console.log(data)
      for (let i = 0; i < data.length; i++) {
        for (const key in data[i].paymentPlan[i]) {
          console.log('i:' + i)
          data[i][key] = data[i].paymentPlan[i][key]
        }
        delete data[i].paymentPlan[i]
      }
    },
    // 查询数据方法
    getData() {
      queryContractList(this.searchForm.payType, this.searchForm.contractId, this.searchForm.storeId, this.searchForm.rentType, this.page, this.limit).then(res => {
        const { data } = res
        this.total = data.length
        this.formData = data
        this.loading = false
      })
    },
    // 点击查询
    query() {
      this.getData()
    },
    // 关闭dialog
    closePopUp() {
      this.ispreview = false
      this.isPayment = false
      this.isCheck = false
      this.isDetails = false
    },
    // 获取ID
    selectId(val) {
      console.log(val)
      if (val.length > 1 || val.length === 0) {
        this.isDisabled = true
      } else {
        this.contractId = val[0].contractId
        this.isDisabled = false
      }
    },
    // 打开批量付款
    isPaymentPopUp() {
      queryRentColletion(this.searchForm.rentType, this.page, this.limit, '').then(res => {
        const { data } = res
        this.payment = data
      })
      paymentMoney().then(res => {
        this.collectionInfoForm = res.data
      })
      this.isPayment = true
    },
    // 每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 点击查看凭证
    ischeck() {
      this.isCheck = true
    },
    // 点击打开导出数据组件
    isDetailsBtn() {
      this.isDetails = true
    },
    // 是否使用同一付款银行
    isChecked(val) {
      if (val) {
        this.iSbackAccount = this.collectionInfoForm[0].companyBankAccount
      } else {
        this.iSbackAccount = ''
      }
    },
    // 新增流水数据
    runWater() {
      // 插入一组新数据
      const data = {
        companyBankAccount: this.iSbackAccount,
        companyBankName: this.collectionInfoForm[0].companyBankName,
        paymentName: '',
        landadyBankAccout: '',
        landadyBankDeposit: '',
        payTel: '',
        payMoney: ''
      }
      this.collectionInfoForm.push(data)
    },
    // 移除收款表格
    deleteRow(scope) {
      // 通过实际收款日期来删除 暂时没有拿到实际收款日期
      paymentPlanDelete(scope.row.actualPaymentTime).then(() => {
      })
    },
    // 提交收款
    subpayee() {
      addPaymentPlan(this.collectionInfoForm).then(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style scoped>
.title{
  border-left: 6px solid #409EFF;
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
.paymentWater{
  margin-top: 30px;
}
.el-pagination{
  margin-top: 20px;
  margin-left: 70%;
}
.sameAccount{
  display: flex;
  height: 60px;
  line-height: 60px;
}
.accountWater{
  display: flex;
  margin-left: 20px;
  width: 400px;
}
.accountWater>.el-input{
  width:70% !important;
  margin-left: 10px;
}
.totalPrice {
  display: inline-block;
  margin-top: 20px;
}
.paymentBtn {
  margin-top: 20px;
}
</style>
